<?php
require_once('config/init.php');
require_once('check.php'); //判断是否登录

//ajax请求判断
if($_POST)
{
    $code = isset($_POST['code']) ? trim($_POST['code']) : 0;

    if($code)
    {
        //查询地区信息 保存到cookie中
        $sql = "SELECT name,province FROM {$pre_}region WHERE code = '$code'";
        $region = find($sql);

        $province = isset($region['province']) ? trim($region['province']) : "";
        $city = isset($region['name']) ? trim($region['name']) : "";

        setcookie("province", $province, time() + 3600);
        setcookie("city", $city, time() + 3600);

        //请求天气情况
        $weather = GetWeather($city);
        
        //清空缓冲区
        ob_end_clean();

        //返回json
        echo json_encode(['weather' => $weather]);
        exit;
    }
}

//获取cookie
$province = isset($_COOKIE['province']) ? trim($_COOKIE['province']) : '';
$city = isset($_COOKIE['city']) ? trim($_COOKIE['city']) : '';
$weather = isset($_COOKIE['weather']) ? trim($_COOKIE['weather']) : '';

// 如果有cookie 说明是第二次访问了

if(empty($city)) //第一次访问，没有cookie
{
    $region = GetLocation(); //获取到了城市信息 保存到cookie中

    $province = isset($region['province']) ? trim($region['province']) : "";
    $city = isset($region['name']) ? trim($region['name']) : "";

    // 保存cookie
    setcookie("province", $province, time() + 3600);
    setcookie("city", $city, time() + 3600);

    //请求天气情况
    $weather = GetWeather($city);
}

?>
<!-- 城市地区插件 -->
<link rel="stylesheet" href="assets/plugins/city-picker/city-picker.css" />
<script src="assets/plugins/city-picker/city-picker.data.min.js"></script>
<script src="assets/plugins/city-picker/city-picker.min.js"></script>
<style>
    .city-picker-span{
        display: inline-block;
        width:auto!important;
        background:rgba(71, 71, 71, 0)!important;
        border:0px;
        text-overflow: clip;
        white-space: nowrap;
        color:#fff!important;
        font-size:1em;
        font-weight: bold;
        padding-top:2px;
    }

    .city-picker-span > .placeholder{
        color:#fff;
    }

    .city-picker-span > .title > span{
        color:#fff;
    }

    .city-picker-span > .arrow{
        display: none;
    }

    #weather{
        display: inline-block;
        margin-top:2px;
        margin-left:5px;
    }

    #api{
        padding-left:0;
        padding-right:0;
        text-align: left;
    }
</style>

<div class="navbar">
    <div class="navbar-inner">
        <ul class="nav pull-right">
            <li>
                <a id="api" href="javascript:void(0)" role="button">
                    <span id="picker" readonly data-level="city" data-simple="true" data-responsive="true" placeholder="请选择城市"></span>
                    <b id="weather">2024/09/20 多云 34度</b>
                </a>
                
            </li>
            <li>
                <a href="#" role="button">
                    <i class="icon-user"></i><?php echo $Login['username'];?>
                </a>
            </li>
            <li>
                <a id="logout" href="javascript:void(0)" class="hidden-phone visible-tablet visible-desktop" role="button">退出</a>
            </li>
        </ul>
        <a class="brand" href="index.php"><span class="second">通讯录</span></a>
    </div>
</div>
<script>
    $("#logout").click(function(){
        if(confirm('是否确认退出')) location.href = `login.php?action=logout`
    })

    //定义全局变量
    var province = "<?php echo $province;?>";
    var city = "<?php echo $city;?>";
    var weather = "<?php echo $weather; ?>";
    
    //初始值设置
    $("#picker").citypicker({province, city})
    $("#weather").html(weather)

    //城市切换的事件
    $("#picker").on("cp:updated", function(){
        //获取到城市组件
        var citypicker = $(this).data("citypicker")
        // 获取城市地区码
        var code = citypicker.getCode('city')

        //如果当城市有改变的话，就执行条件
        if(code)
        {
            $("#weather").html("查询天气中.......")

            //发送ajax请求
            $.ajax({
                type: 'post',
                data: {code},
                dataType:'json',
                success: success => $("#weather").html(success.weather),
                error: err => console.log(err)
            })
        }
    })
</script>